<template>
    <div class="root">
        <div class="data-detail-block">
            <data-item class="data-item-block" :data="info"></data-item>
            <div class="data-menu-block">
                <div class="data-router-block">
                    <router-link :to="{name:'description'}" active-class="active-class-bg">{{ $t('langObj.gaisu') }}</router-link>
                    <router-link :to="{name:'file'}" active-class="active-class-bg">{{ $t('langObj.file') }}</router-link>
                </div>
                <div class="data-button-block">
                    <Button type="error" @click="toBuy" v-if="!info.userBuyer">{{ $t('langObj.buy') }}</Button>
                    <Button type="primary" @click="toOrderProject" v-if="info.userBuyer && !info.outTime">{{ $t('langObj.pro') }}</Button>
                    <Button v-if="info.outTime" disabled style="width:80px">{{ $t('langObj.expire') }}</Button>
                    <Button type="primary" @click="handleViewHistory">{{ $t('langObj.proHistory') }}</Button>
                    <Button type="primary" @click="toExtendBuy" v-if="info.userBuyer">{{ $t('langObj.xufei') }}</Button>
                    <Button
                        :type="voted ? 'primary' : 'default'"
                        shape="circle"
                        icon="ios-thumbs-up-outline"
                        @click="handleVote"
                    ></Button>
                </div>
            </div>
            <router-view class="routerView"></router-view>
        </div>
        
    </div>
</template>

<script>
import dataItem from "@/components/datalab/dataItem";
import { mapActions } from 'vuex';
export default {
    components:{dataItem},
    props:["id"],
    data(){
        return{
            info:{},
            voted:false,
        }
    },
    methods: {
        ...mapActions(['XgetDataDetail','XhasVoted','XtoggleVote']),
        toBuy(){
            this.$router.push({path:`/order/${this.info.descId}/${1}/${0}`})
        },
        toExtendBuy(){
            this.$router.push({path:`/order/${this.info.descId}/${1}/${1}`})
        },
        toOrderProject(){
            this.$router.push({path:`/order/${this.info.descId}/${2}/${0}?type=datalab`})
        },
        handleViewHistory(){
            this.$router.push({path:`/datalab/history/${this.info.descId}`})
        },
        handleVote(){
            this.XtoggleVote({
                voted:this.voted,
                data_id:this.id
            }).then(res => {
                this.pageMounted()
            })
        },
        async pageMounted(){
            try{
                var [info,voted] = await Promise.all([this.XgetDataDetail(this.id),this.XhasVoted(this.id)]);
            }catch(e){
                console.log(e)
            }
            this.info = info.data;
            this.voted = voted.data;
        }
    },
    mounted() {
        this.pageMounted()
    },
}
</script>

<style lang="scss" scoped>
    .root{
        width: 100%;
        height: 100%;
        background-color:#f9fafa;
    }
    .data-detail-block{
        width:1200px;
        margin: 0 auto;
        padding: 16px 0;
        user-select: none;
    }
    .data-item-block{
        padding: 25px !important;
        border-bottom: 1px solid #f7f7f7;
    }
    .data-menu-block{
        background-color: #fff;
        height: 80px;
        padding: 0 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        a{
            color:#333;
            display: inline-block;
            line-height: 80px;
            margin-right:40px;
            padding:0 30px;
            &:hover{
                color:#C2142F !important;
                border-bottom: 4px solid #C2142F;
            }
        }
        .data-button-block{
            button + button{
                margin-left: 5px;
            }
        }
    }
    .routerView{
        margin-top:20px;
        padding:20px;
        background-color: #fff;
    }
</style>
